<template>
	<view class="container">
		<view class="select">
			<uni-data-select class="select-item" v-model="price" :localdata="range" label="价钱选择" placeholder="请选择价钱"></uni-data-select>
			<uni-data-select class="select-item" v-model="area" :localdata="range1" label="地区选择" placeholder="请选择地区"></uni-data-select>
		</view>
		<view class="list-item" v-for="(v, i) in list" :key="i">
			<image :src="v.image" mode=""></image>
			<div class="right">
				<view class="title">{{ v.title }}</view>
				<view class="price">
					<text>总价¥:{{ v.price }}</text>
					<text>所在地区：{{ v.area }}</text>
				</view>
				<view class="size">
					总面积：{{ v.size }} 平方米
				</view>
				<view class="type">
					类型： {{ v.typeHouse }}
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				price: '',
				area: '',
				params: {
					price_gte: 0,
					price_lte: 0,
					area: ''
				},
				range: [{
					value: '50-1000',
					text: '全部'
				}, {
					value: '50-100',
					text: '50万-100万'
				},{
					value: '100-200',
					text: '100万-200万'
				},{
					value: '200-500',
					text: '200万-500万'
				},{
					value: '500-1000',
					text: '500万-1000万'
				}],
				range1: ["全部","浦东新区", "徐汇", "长宁", "普陀", "虹口", "杨浦", "黄浦", "静安", "宝山", "闵行"].map(v => {
					return {
						value: v,
						text: v
					}
				})
			}
		},
		methods: {
			async fetchList() {
				const params = {}
				// 1. 是否价格查找
				if(this.params.price_gte && this.params.price_lte) {
					params.price_gte = this.params.price_gte
					params.price_lte = this.params.price_lte
				}
				// 2. 是否低于查找
				if(this.params.area && this.params.area !== '全部') {
					params.area = this.params.area
				}
				
				const resp = await uni.request({
					url: 'http://localhost:3000/list',
					data: params
				})
				console.log(resp.data)
				this.list = resp.data
			},
		},
		onLoad() {
			this.fetchList()
		},
		watch: {
			price(price) {
				const [min, max] = price.split('-');
				this.params = {
					...this.params,
					price_gte: min,
					price_lte: max
				}
			},
			area(area) {
				this.params = {
					...this.params,
					area: area
				}
			},
			params() {
				this.fetchList()
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	
	.select {
		display: flex;
		.select-item {
			flex: 1;
		}
	}
</style>